<template>
    <h1>关于pinia使用</h1>
    <div class="pinia">this is pinia count msg</div>
    <div>{{$store}}</div>
    <div>{{$store.name}}</div>
    <div>age:{{$store.age}}</div>
    <div>{{$store.fullName}}</div>
    <button @click="agePlus">年龄增加</button>
    <button @click="goName">调用方法</button>

    <hr>

    <div class="pinia">this is pinia user msg</div>
    <div>{{$userStore.userData}}</div>
    <div>{{$userStore.name}}</div>
    <div>age:{{$userStore.age}}</div>
    <div>{{$userStore.fullName}}</div>
    <button @click="userPlus">年龄增加</button>
    <button @click="goUserName">调用方法更改名字</button>
</template>

<script setup>
import {reactive} from 'vue'
import { useCounterStore } from '@/store/counter'
import { useUserStore } from '@/store/user'
const $store = useCounterStore();

const vData = reactive({

})

const agePlus = () => {
    $store.age ++;
}

const goName = () => {
    $store.getName();
}


const $userStore = useUserStore();
const userPlus = () => {
    $userStore.age ++;
}

const goUserName = () => {
    $userStore.setName();
}
</script>

<style lang="scss" scoped>
.pinia{
    margin-top: 40px;
    font-size: 24px; color: red;
}

div{
    margin:5px 0;
}
</style>